<template>
  <div class="contain">
    <el-container>
      <el-main class="main">
        <div class="video-item" v-for="item in VideoList" :key="item.id">
          <div class="video-item-title">
            <div class="left">
              <span>{{ item.videoTitle }}</span>
            </div>
            <div class="right">
              <el-button round @click="getVideoClassifyPage()"
                >查看更多</el-button
              >
            </div>
          </div>
          <div class="hr"></div>
          <div class="video-list-contain">
            <router-link
              class="video-item-contain"
              v-for="videoItem in item.videoList"
              :key="videoItem.id"
              :to="'/videoDetail/' + videoItem.id"
            >
              <div class="video-item-shadow">
                <el-image
                  style="width: 190px; height: 130px; border-radius: 10px"
                  :src="videoItem.coverUrl"
                  fit="fill"
                />
              </div>
              <div class="text">{{ textSplice(videoItem.videoTitle) }}</div>
            </router-link>
          </div>
        </div>
      </el-main>
      <el-aside width="300px">
        <VideoAside></VideoAside>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import VideoAside from './VideoAside.vue'
import VideoApi from '@/api/core/VideoList'
export default {
  name: 'VideoList',
  components: { VideoAside },
  data() {
    return {
      VideoList: [],
    }
  },

  created() {
    this.getVideoList()
  },

  methods: {
    //获取时评列表
    getVideoList() {
      VideoApi.getVideoList()
        .then((response) => {
          this.VideoList = response.data.main_top8
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //前往视频分类页面
    getVideoClassifyPage() {
      this.$router.push('/video-class')
    },

    //格式化文字
    textSplice(text) {
      if (text.length < 26) {
        return text
      }
      return text.substring(0, 25) + ' ...'
    },

    getVideoMore(id) {
      this.$notify({
        title: '😁',
        message: '该功能正在完善',
        type: 'success',
      })
      console.log(id)
    },
  },
}
</script>

<style scoped>
.contain {
  width: 1180px;
}
a {
  text-decoration: none;
  color: #409eff;
}
.hr {
  width: 100%;
  height: 1px;
  border-top: 2px solid #efefef;
  margin-bottom: 9px;
}
.main {
  width: 840px;
}
.video-item {
  /*  background-color: aquamarine; */
  width: 800px;
  position: relative;
  padding: 20px;
  background-color: aliceblue;
  border-radius: 10px;
  margin-bottom: 20px;
}
.video-item-title {
  height: 34px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.video-item-title .left,
.video-item-title .right {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.video-list-contain {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.video-item-contain {
  width: 24%;
  height: 220px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  margin-right: 5px;
  margin-bottom: 3px;
  box-sizing: border-box;
  /*  border: 1px solid #efefef; */
  border-radius: 8px;
}
.video-item-contain span {
  margin-top: 18px;
  width: 100%;
}

.video-item-contain .text {
  height: 20px;
  white-space: pre-line;
  font-size: 14px;
}

.video-item-shadow :hover {
  box-shadow: 10px 5px 5px #409eff;
}
</style>
